<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp" %>
<jsp:useBean id="expressionMap" scope="page" class="cn.sumpu.app.guoguojie.domain.Ext.Expression" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@include file="../common/meta.jsp" %>
<title><c:out value="${bonus.name}" /> - 红利会 - 果果街</title>
<%@include file="../common/jscss.jsp" %>


</head>
<body>
<%@include file="../common/header.jsp" %>
<div class="wraper clearFix">
	<%--<div class="hlsAdFir">
    	<a href="#"><img src="imgs/hlsPic11.png" class="r5" /></a>
    </div>
    
    --%><!--  leftPart --->
	<div class="hlsLeft fl iedis">
        <div class="hlsDetaBox mb20">
            <div class="boxHeader"> 
                <b class="ltSquare"></b>
                <b class="rtSquare"></b> 
            </div>
            <div class="hlsDeta clearFix">
            	<h1 class="titleCPhls"><c:out value="${bonus.name}" /></h1>
                <div class="hlsPicLeft fl">
                	<div class="hls_pic_de">
                    	<a href="${bonus.fromUrl}" target="_blank"><img width="260" height="328" src="${bonus.imageServer}${bonus.imageUrl}" /></a>
                        <a href="${bonus.fromUrl}" target="_blank" class="hlsCheDet">查看宝贝详情</a>
                    </div><%--
                    <span>
                    	分享到：
                        <a href="#"><img src="imgs/hlsdetail06.png" /></a>
                        <a href="#"><img src="imgs/hlsdetail06.png" /></a>
                        <a href="#"><img src="imgs/hlsdetail06.png" /></a>
                    </span>
                --%></div>
                <div class="hlsConRig fl">
                	<p class="hlsStylePop font14px">
                        	品牌：<span><c:out value="${bonus.className}" /></span>
                            人气：<span>${bonus.viewAmount}</span>
                    </p>
                    <p class="hlsProDet">
                        	产品介绍：
                            <span>
                            	<c:out value="${bonus.intro}" />
                                <a target="_blank" href="${bonus.fromUrl}">更多介绍</a> 
                            </span>
                    </p>
                    <div class="hlsDate_bg r5">
                    	<c:choose>
                    		<c:when test="${bonus.bonusView.status == 1}">
                    			<span class="hlsDatTitle">申请还未开始</span>
                    		</c:when>
                    		<c:when test="${bonus.bonusView.status == 2}">
                    			<span class="hlsDatTitle">正在申请中...</span>
                    		</c:when>
                    		<c:when test="${bonus.bonusView.status == 3}">
                    			<span class="hlsDatTitle">申请已结束，试用报告提交中...</span>
                    		</c:when>
                    		<c:when test="${bonus.bonusView.status == 4}">
                    			<span class="hlsDatTitle">试用报告提交结束...</span>
                    		</c:when>
                    	</c:choose>
                    	
                        <p class="hlsTimeLeft clearFix">
                        	<span class="hlsltSpan">剩余时间：</span>
                            <i class="hls_d"></i><span>天</span>
                            <i class="hls_h"></i><span>小时</span>
                            <i class="hls_m"></i><span>分</span>
                            <i class="hls_s"></i> <c:if test="${bonus.bonusView.status < 4}"><i class="ms"></i></c:if><span>秒</span>
                            <input type="hidden" value="${bonus.bonusView.defaultTime}" class="default_time" />
                        </p>
                        <span class="hlsDatNum">
                        	还有<i>${bonus.leaveAmount}</i>份
                        </span>
                        <div class="hlsTimeBg">
                        	<c:set value="${(bonus.amount-bonus.leaveAmount)*100/bonus.amount}" var="amountPercent"></c:set>
                        	<div class="hlsTimeBgO" style="width:${amountPercent}%;"></div>
                            <div class="hlsAlSendNum" style="left:${amountPercent-12}%;">已发出${bonus.amount-bonus.leaveAmount }份</div>
                        </div>
                    </div>
                    <c:choose>
	               		<c:when test="${bonus.bonusView.status == 1}">
	               		</c:when>
	               		<c:when test="${bonus.bonusView.status == 2}">
	               			<a href="#ineedbonus" class="hlsAppyBtn">我要红利</a>
	               		</c:when>
	               		<c:when test="${bonus.bonusView.status == 3}">
	               			<span class="hlsOverBtn">已结束了</span>
	               			<a href="createPictorial.htm?bonus=${bonus.identifier}" class="hlsAppyBtn">提交报告</a>
	               		</c:when>
	               	</c:choose>
                    
                    <div class="hlsNumAll">
                        	<span class=" font18px fontWeight hlsRP">${bonus.applyNums}</span>人申请
                    </div>
                    <ul class="hlsName">
                        	<c:forEach items="${bonus.applyMember}" var="mem">
	                       		 <li>
                       				<a href="cover.htm?fid=${mem.family}">
	                               	 	<img class="u_id_img" memberId="${mem.identifier}" width="20" src="${mem.imageServer}${mem.avatar}" />
	                               	</a>
		                         </li>
                       		</c:forEach>
                        </ul>
                </div>
            </div>
            <div class="boxFooter">
                <b class="lfSquare"></b>
                <b class="rfSquare"></b>
            </div>
        </div>
        
        <div class="hlsDetaBox mb20">
            <div class="boxHeader"> 
                <b class="ltSquare"></b>
                <b class="rtSquare"></b> 
            </div>
            <div class="hlsComDeta">
            	<c:choose>
               		<c:when test="${bonus.bonusView.status == 1 || bonus.bonusView.status == 2}">
               			<span class="syTitle">申请要求</span>
               			 <p>${bonus.applyReq}</p>
               		</c:when>
               		<c:when test="${bonus.bonusView.status == 3}">
               			<span class="syTitle">试用报告要求</span>
               			 <p>${bonus.tryReq}</p>
               		</c:when>
               		<c:when test="${bonus.bonusView.status == 4}">
               			<span class="syTitle">试用报告要求</span>
               			 <p>${bonus.endReq}</p>
               		</c:when>
               	</c:choose>
            	
               <c:if test="${bonus.bonusView.status == 2}">
	                <div class="publish_box">
	                	<div class="publishArea r5">
	                    	<div class="publishEdit r5 clearFix">
	                        	<div class="pubEditBox">填写试用申请</div>
	                        	<a  name="ineedbonus"></a>
	                            <textarea class="editText r5" id="apply_content"></textarea>
	                            <input type="button" value="申请" class="editAppBtn" id="doing_submit"/>
	                            <div class="pub_ext clearFix" style="position: relative;z-index: 2;">
	                            	<span class="fl">添加：</span>
	                                <a href="javascript:;" id="doing_face" class="ext_press fl">表情</a>
	                                <div class="h_bqText" style="display:none;left: 50px;top: 28px;" id="expression_all" >
										  <div class="h_bqText_img">
										  <c:forEach items="${pageScope.expressionMap.expressionMap }" var="e">
										  	<img src="images/expression/${e.key}" style="cursor: pointer;"
										  	 title="${e.value }" onclick="addExpression(this)" alt="${e.value }" />
										  </c:forEach>
										  </div>
									</div>
	                                <a href="javascript:doingImgUploadDialog();" class="ext_pic fl">图片</a>
	                            </div>
	                        </div>
	                    </div>
	                    <div class="pub_box">
							<ul class="pub_img clearfix" id="doing_product_list">
							</ul>
						</div>
	                </div>
                </c:if>
                <c:if test="${bonus.bonusView.status > 1 && fn:length(sucMember) > 0}">
                	<div class="hlsNames">
	                	<span class="names_title">申请成功的用户</span>
	                    <div class="name_all">
	                    	<ul>
	                    		<c:forEach items="${sucMember}" var="mem">
	                        	<li>
	                            	<a target="_blank" href="cover.htm?fid=${mem.family}"><img src="${mem.imageServer}${mem.avatar}" class="r3 fl" /></a>
	                                <div class="fl name_all_rc">
	                                	<a target="_blank" href="cover.htm?fid=${mem.family}"><c:out value="${mem.nickname}" /></a>
	                                </div>
	                            </li>
	                            </c:forEach>
	                        </ul>
	                    </div>
	                </div>
                </c:if><%--
                <c:if test="${bonus.bonusView.status == 3}">
                	 <div style="margin:20px 0 0 65px;">
	                	<img src="imgs/hlsdetail08.jpg" />
	                </div>
                </c:if>
               
          --%></div>
      		<div class="boxFooter">
                <b class="lfSquare"></b>
                <b class="rfSquare"></b>
            </div>
        </div>
        
        <c:if test="${bonus.bonusView.status == 2 && bonus.applyNums > 0}">
        	<div id="try_report_apply_doing" class="hlsDetaBox mb20"></div>
        </c:if>
    </div>
    <!--  leftPart --->
    
	<!--  rightPart --->
	<div class="hlsRight fr">
    	<div class="hlsComBox mb20">
        	<div class="hlsBoxHead">
            	申请红利三步骤   
            </div>
            <div class="hlsApplybody">
            	<span><i>1</i>按要求完成红利任务</span>
                <span><i>2</i>提交申请，等待结果</span>
                <span><i>3</i>提交试用报告</span>
            </div>
            <div class="hlsRBottom"></div>	
        </div>
        <div class="hlsLinkDeta mb20">
        	<div class="boxHeader"> 
                <b class="ltSquare"></b>
                <b class="rtSquare"></b> 
        	</div>
            <div class="hlsLinkIn">
            	<a target="_blank" href="http://www.guoguojie.com/forumDc.htm?id=3fcf416e-4956-4a87-b2df-899c92e8c0af" class="hlsLinkA">1</a>
                <a target="_blank" href="http://www.guoguojie.com/picdt.htm?id=def27fda-d756-430c-8728-b3f8f2b87129" class="hlsLinkB">2</a>
            </div>
            <div class="boxFooter">
                <b class="lfSquare"></b>
                <b class="rfSquare"></b>
        	</div>
        </div>
        
        <c:if test="${fn:length(canApply) > 0}">
	        <div class="hlsComBox mb20">
	        	<div class="hlsBoxHead">
	            	<a href="bonus.htm" class="hlsBoxR">查看更多</a>
	            	你还可以申请
	            </div>
	            <ul class="otherApp">
	            	<c:forEach items="${canApply}" var="apply">
	            		<li>
		                	<a href="bonusDetail.htm?bonusId=${apply.identifier}"><img src="${apply.imageServer}${apply.imageUrl}" class="appOtherPic left r3" /></a>
		                    <div class="otherAppDet">
		                    	<a href="bonusDetail.htm?bonusId=${apply.identifier}"><c:out value="${apply.name}" /></a>
		                        <span class="noticeNum">份数：<i>${apply.amount}</i></span>
		                    </div>
		                </li>
	            	</c:forEach>
	            	
	              
	            </ul>
	            
	            <div class="hlsRBottom"></div>	
	        </div>
        </c:if>
        <c:if test="${bonus.bonusView.status == 2 && fn:length(bonusApplyList) > 0}">
        	<div class="hlsComBox mb20">
	        	<div class="hlsBoxHead">
	            	她们正在申请红利
	            </div>
	            <ul class="appingInfo">
	            	<c:forEach items="${bonusApplyList}" var="bonusApply">
	            		<li>
		                	<a href="cover.htm?fid=${bonusApply.family}"><img width="48" memberId="${bonusApply.member}" src="${bonusApply.imageServer}${bonusApply.avatar}" class="r3 fl u_id_img" /></a>
		                    <div class="appOthInfo">
		                    	<a href="cover.htm?fid=${bonusApply.family}" class="elseName u_name"><c:out value="${bonusApply.nickname}" /></a>
		                        <p>${bonusApply.formatDate}申请了<a href="bonusDetail.htm?bonusId=${bonusApply.bonus}"><c:out value="${bonusApply.name}" /></a></p>
		                    </div>	
		                </li>
	            	</c:forEach>
	            	
	             </ul>
	            <div class="hlsRBottom"></div>	
	        </div>
        </c:if><%--
        <div class="hlsComBox mb20">
        	<div class="hlsBoxHead">
            	红利试用合作
            </div>
            <div class="detail_p">
            	<p class="fontColor666" style="line-height: 24px;">
            		想为妈妈们提供优质的宝宝试用产品吗？赶快联系我们吧！<br/>
            		QQ：406000829  331969329<br/>
            		电话：021-62496063-8002<br/>
            		工作时间：周一至周五9:30-18:00
            	</p>
            </div>
            <div class="hlsRBottom"></div>	
        </div>
        
        <div class="hlsComBox mb20">
        	<div class="hlsBoxHead">
            	免责声明
            </div>
            <div class="detail_p">
            	<p class="fontColor999">1．果果街仅为会员提供试用渠道，不对任何试用产品效果及质量提供保障。若会员在产品试用过程中有任何不适，请即时停用并联系<a class="u_name" target="_blank" style="color:#007ABC;">@果果妈</a> 。<br />2. 果果街为会员提供试用机会，会员收到试用产品后，请先与快递验货后再签收，以确认试用产品完整无损。如未进行确认而出现的短缺或损坏，本站不承担任何责任。</p>
            </div>
            <div class="hlsRBottom"></div>	
        </div>
        
    --%></div>
    <div class="clear"></div>
    <c:if test="${bonus.bonusView.status == 3 || bonus.bonusView.status == 4}">
      	<div class="totalBtn clearFix">
             	<a href="javascript:;" id="try_report_b">
                 	<span id="try_report_amount">试用报告(0)</span>
                     <i></i>
                 </a>
                 <a href="javascript:;" class="totalApplyN" id="apply_doing_b">
                 	<span>申请人数(${bonus.applyNums})</span>
                     <i></i>
                 </a>
      	</div>
      	<div class="allBoxW"  id="try_report_apply_doing"></div>
      </c:if>
    
    <!--  rightPart --->
</div>
<%@include file="../common/footer.jsp" %>
<script type="text/javascript" src="js/web2/bonus.js"></script>
<script type="text/javascript">
	var doingImgList = new ArrayList();
	
	$(function(){
		
		$("#doing_submit").click(function(){
			if(GUOGUO.checkLogin()){
				var xinQing = $("#apply_content").val();
				if(IsNull(xinQing)){
					alert("请输入申请内容");
					return ;
				}
				if(xinQing.length > 140){
					alert("最多可以输入140个字，您输入的太多了。");
					return ;
				}
				$.post("checkApplyBonus.htm",{bonus:'${bonus.identifier}'},
					function(data){
						if(data.code=='1'){
							applyInfo();
						}else{
							alert(data.msg);
						}
					},"json");
			}else{
				GUOGUO.memberLogin();
			}
			
		});
		
		$("#doing_face").click(function(){
			$("#expression_all").show();
		});
		
		$("#expression_all").mouseleave(function(){
			$(this).hide();
		});
		
		$("#try_report_apply_doing").load("tryReport.htm?bonus=${bonus.identifier}");
		
		$("#try_report_b").click(function(){
			$(this).removeClass();
			$("#apply_doing_b").addClass("totalApplyN");
			$("#try_report_apply_doing").load("tryReport.htm?bonus=${bonus.identifier}",function(){
				$("#try_report_apply_doing").removeClass().addClass("allBoxW");
			});
		});
		
		$("#apply_doing_b").click(function(){
			$(this).removeClass();
			$("#try_report_b").addClass("totalApplyN");
			$("#try_report_apply_doing").load("applyDoing.htm?bonus=${bonus.identifier}&status=${bonus.bonusView.status}",function(){
				$("#try_report_apply_doing").removeClass().addClass("hlsDetaBox mb20 mt10");
			});
		});
		if('${bonus.bonusView.status}' == '2'){
			$("#apply_doing_b").removeClass();
			$("#try_report_b").addClass("totalApplyN");
			$("#try_report_apply_doing").load("applyDoing.htm?bonus=${bonus.identifier}&status=${bonus.bonusView.status}",function(){
				$("#try_report_apply_doing").removeClass().addClass("hlsDetaBox mb20 mt10");
			});
		}else{
			$("#try_report_b").removeClass();
			$("#apply_doing_b").addClass("totalApplyN");
			$("#try_report_apply_doing").load("tryReport.htm?bonus=${bonus.identifier}",function(){
				$("#try_report_apply_doing").removeClass().addClass("allBoxW");
			});
		}
		
	});
	
	function applyInfo(){
		if($("#apply_info").size() < 1){
			$(document.body).append('<div id="apply_info" class="boxRed r5"  style="position:absolute;z-index:200;"></div>');
		}
		
		$("#apply_info").load("applyInfo.htm?bonus=${bonus.identifier}",function(){
			showDivMiddle("apply_info");
		});
	}
	
	//添加表情
	
	function addExpression(self){
		$(self).parent().parent().parent().parent().find("textarea").insertAtCaret(self.alt);
	}
	
	// 添加图片弹出框		
	function doingImgUploadDialog(){
		if(GUOGUO.checkLogin()){
			if(doingImgList.size() >=3){
				alert("最多只能发三张图片");
				return ;
			}
			var size = $("#lb_pic").size();	
			if(size < 1){
				$(".pub_ext").append('<div id="lb_pic" class="light_box" style="top: 25px; left: 40px; display: block;position:absolute;z-index:1000000"></div>');
			}
			$("#lb_pic").load("doingImgUploadDialog.htm").show();
		}else{
			GUOGUO.memberLogin();
		}
		
	}
	
	
	//新版本微博保存
	function saveApplyInfo(){
		var username = $("#username").val();
		if(IsNull(username)){
			alert("请填写真实姓名！");
			return ;
		}
		var province = $("#province").val();
		if(IsNull(province) || province == "0"){
			alert("请选择省份！");
			return ;
		}
		
		var city = $("#city").val();
		if(IsNull(city) || city == "0"){
			alert("请选择城市！");
			return ;
		}
		
		var address = $("#address").val();
		if(IsNull(address)){
			alert("请填写街道地址！");
			return ;
		}
		
		var phone = $("#phone").val();
		if(IsNull(phone)){
			alert("请填写联系电话！");
			return ;
		}
		
		var zipcode = $("#zipcode").val();
		if(IsNull(zipcode)){
			alert("请填写邮编！");
			return ;
		}
		
		var xinQing = $("#apply_content").val();
		
		
		var picture_url = '';
		var picture_thumbnail = '';
		var picture_url2 = '';
		var picture_thumbnail2 = '';
		var picture_url3 = '';
		var picture_thumbnail3 = '';
		var image_server='';
		if(doingImgList.size()>0){
			for(var i = 0;i < doingImgList.size();i++){
				var doingImg = doingImgList.get(i);
				switch(i){
					case 0:{
						picture_url = doingImg.original;
						picture_thumbnail = doingImg.thumbnail;
						image_server = doingImg.imageServer;
						break;
					}
					case 1:{
						picture_url2 = doingImg.original;
						picture_thumbnail2 = doingImg.thumbnail;
						break;
					}
					case 2:{
						picture_url3 = doingImg.original;
						picture_thumbnail3 = doingImg.thumbnail;
						break;
					}
				}
			}
		}
		
		var pictureList = new Array();
		if(doingImgList.size() > 0){
			for(var i = 0; i < doingImgList.size(); i++){
				pictureList.push(doingImgList.get(i));
			}
		}
		
		
		$("#apply_submit").unbind("click");
		$.post("applyBonus.htm", {
				'content' : xinQing ,
				'imageServer':image_server,
				'pictureUrl':picture_url,
				'pictureThumbnail':picture_thumbnail,
				'pictureUrl2':picture_url2,
				'pictureThumbnail2':picture_thumbnail2,
				'pictureUrl3':picture_url3,
				'pictureThumbnail3':picture_thumbnail3,
				'ownerType':'family',
				'pictureList' : escape($.toJSON(pictureList)),
				'isShare':false,
				'type':'applyBonus',
				'bonus':'${bonus.identifier}',
				'username':username,
				'province':$("#province").find("option:selected").text(),
				'city':$("#city").find("option:selected").text(),
				'provinceCode':province,
				'cityCode':city,
				'address':address,
				'zipcode':zipcode,
				'phone':phone,
				'memo':$("#memo").val()
			}, function(data) {
				if (data.code == '1') {
					alert("您的申请已提交！请耐心等待审核。");
					window.location.reload();
				}else{
					alert(data.msg);
					hideDivMiddle("apply_info");
					$("#apply_submit").click(function(){
						saveDoingNew();
					});
				}
				
			},"json");
		
	}
	
	//删除上传图片信息
	function delDoingImg(obj){
		$(obj).parent().parent().remove();
		var productNumber = doingImgList.size();
		var delCount = -1;
		for(var i = 0; i < productNumber; i++){
			var picUrl = $(obj).parent().find(".i").attr("src");
			var doingImg = doingImgList.get(i);
			if((doingImg.imageServer+doingImg.thumbnail+"_100x100.jpg") == picUrl){
				delCount = i;
				$.post("delPicPro.htm",{
					picUrl:doingImg.pictureUrl,
					picUrlThumb:doingImg.thumbnail
				},function(data){
				});
			}
		}
		if(delCount != -1){
			doingImgList.remove(delCount);
		}
	}
	
</script>
</body>
</html>
